<template>
  <div class="prod-detail">
    <div class="prod-img">
      <div style="width: 330px;">
        <img :src="detailData.picture" width="330" alt="" />
      </div>
      <div class="cont">
        <h1>{{ detailData.title }}</h1>
        <div v-for="(s, i) in detailData.content" :key="i">
          <p v-show="s.width == 0">{{ s.data }}</p>
          <img :src="s.data" v-show="s.width !== 0" class="imgs" />
        </div>
        <div class="prod-detail-bottom">
          <a class="javacript:; collection" @click="save"
            ><img src="../../../assets/imgs/star1.png" v-show="!favourite" />
            <img src="../../../assets/imgs/star2.png" v-show="favourite" />
            <span class="text">{{ $t("vr.collection") }}</span>
          </a>
          <a :href="contactUs" target="_blank" class="collection"
            ><img
              src="../../../assets/imgs/contact.png"
              style="margin-right:3px"
            />
            <span class="text">{{ $t("vr.contactUs") }}</span>
          </a>
          <div class="rightBtns">
            <a :href="sampleApplication" target="_blank"
              ><el-button type="text" class="c1">{{
                $t("vr.sampleApplication")
              }}</el-button></a
            >
            <a :href="visitWebsite" target="_blank"
              ><el-button type="text" class="c2">{{
                $t("vr.visitWebsite")
              }}</el-button></a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      contactUs: "https://www.covestro.com/zh-cn/contact",
      visitWebsite: "https://www.covestro.com/zh-cn/",
      sampleApplication: "https://solutions.covestro.com/zh/account/register",
      detail: {},
      detailData: {},
      favourite: false
    };
  },
  props: {
    prodId: {
      type: String,
      default: ""
    }
  },
  watch: {
    prodId(v) {
      if (v) {
        this.getDetail();
      }
    }
  },
  created() {
    if (!this.prodId) {
      // 获取产品详情
      return;
    }
    this.getDetail();
    this.getContact();
  },
  computed: {
    ...mapState(["lang"])
  },
  methods: {
    getContact() {
      if (this.lang == "en") {
        this.contactUs = "https://www.covestro.com/en/contact";
        this.visitWebsite = "https://www.covestro.com/EN";
        this.sampleApplication =
          "https://solutions.covestro.com/en/account/register";
      } else {
        this.contactUs = "https://www.covestro.com/zh-cn/contact";
        this.visitWebsite = "https://www.covestro.com/zh-cn/";
        this.sampleApplication =
          "https://solutions.covestro.com/zh/account/register";
      }
    },
    // 点击收藏
    async save() {
      this.favourite = !this.favourite;
      try {
        let res = await api.favourite(this.detailData.id, this.favourite);
      } catch (err) {
        console.log(err);
      }
    },
    // 获取详情
    async getDetail() {
      const loading = this.$loading();
      try {
        let res = await api.getProductDetail(this.prodId, this.lang);
        this.detailData = res.data;
        loading.close();
      } catch (err) {
        this.$emit("handleClose");
        loading.close();
      }

      this.favourite = this.detailData.isFavourte ? true : false;
    }
  }
};
</script>
<style>
.prod-list .el-dialog__body {
  padding: 20px 20px 80px 20px !important;
}
.right-wrap .el-dialog__body {
  padding: 20px 20px 80px 20px !important;
}
</style>
<style lang="scss" scoped>
.prod-detail {
  padding: 30px 15px 0;
  max-height: 536px;
  overflow-y: auto;
  .prod-img {
    display: flex;
    .cont {
      padding-left: 30px;
      flex: auto;
      color: #1b1b4e;
      font-size: 14px;
      line-height: 22px;
      width: 100%;
      word-break: break-word;
      overflow: hidden;
      .imgs {
        width: 100%;
        height: 300px;
      }
      h1 {
        margin: 10px 0 26px;
        font-size: 20px;
        line-height: 24px;
      }
      .prod-detail-bottom {
        position: absolute;
        bottom: 10px;
        left: 420px;
        right: 20px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        a {
          // line-height: 55px;
          margin-right: 5px;
        }
        a:first-of-type {
          img {
            margin-top: -1px;
            // background-color: #409eff;
          }
        }
        .collection {
          display: flex;
          align-items: center;
          img {
            width: 14px;
            height: 14px;
            object-fit: contain;
            object-position: center;
            // margin-top: 1px;
            // padding-bottom: 3px;
            // background-color: #409eff;
            // margin-right: 4px;
            // margin-top: 3px;
            // vertical-align: middle;
          }

          .text {
            line-height: 18px;
            height: 18px;
            margin-left: 4px;
            // background-color: #ff00ff;
          }
          & + .collection {
            margin-left: 20px;
          }
        }
        .rightBtns {
          flex: auto;
          text-align: right;
          line-height: 55px;
          .el-button {
            display: inline-block;
            padding: 12px 18px;
            background-image: linear-gradient(to right, #ff7f41, #e6007e);
            color: #fff;
            border: 0;
            &.c1 {
              background-color: #fb4f50;
            }
            &.c2 {
              background-color: #ee9b20;
            }
          }
        }
      }
    }
  }
  h2 {
    font-size: 18px;
    color: #3b4664;
    line-height: 26px;
    margin-bottom: 10px;
  }
  .features {
    margin: 36px 0;
    p {
      line-height: 30px;
      color: #828aa1;
      i {
        color: #fb4f50;
      }
    }
  }
  .documentation {
    p {
      line-height: 30px;
      color: #545dff;
      i {
        color: #fb4f50;
      }
    }
  }
}
</style>
